@import '../style/variable';
@import '../style/mixin';

.dev-tools {
  .tools {
    .console {
      .control {
        @include absolute(100%, 40px);
        cursor: default;
        padding: 10px 10px 10px 40px;
        background: #fff;
        line-height: 20px;
        .icon-clear,
        .icon-info {
          display: inline-block;
          color: $gray;
          padding: 10px;
          font-size: $font-size-l;
          position: absolute;
          top: 1px;
          cursor: pointer;
          transition: color $anim-duration;
          &:active {
            color: $gray-dark;
          }
        }
        .icon-clear {
          left: 0;
        }
        .icon-info {
          right: 0;
        }
        .filter {
          cursor: pointer;
          color: $gray;
          margin: 0 1px;
          font-size: $font-size-s;
          height: 20px;
          display: inline-block;
          padding: 0 4px;
          line-height: 20px;
          border-radius: $border-radius;
          transition: background $anim-duration, color $anim-duration;
          &.active {
            background: $gray;
            color: #fff;
          }
        }
      }
      padding-top: 40px;
      padding-bottom: 40px;
      .js-input {
        position: absolute;
        z-index: 100;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        height: 40px;
        .buttons {
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 40px;
          color: $gray;
          font-size: $font-size-s;
          border-bottom: 1px solid $gray-light;
          .button {
            cursor: pointer;
            width: 50%;
            display: inline-block;
            text-align: center;
            border-right: 1px solid $gray-light;
            height: 40px;
            line-height: 40px;
            float: left;
            &:last-child {
              border-right: none;
            }
            transition: background $anim-duration, color $anim-duration;
            &:active {
              background: $blue;
              color: #fff;
            }
          }
        }
        textarea {
          padding: 10px;
          outline: none;
          border: none;
          font-size: 14px;
          width: 100%;
          height: 100%;
          user-select: text;
          resize: none;
        }
      }
    }
  }
}
